<template>
	<view>
		<view class="img">
			<img :src="item.img" alt="" style="width: 100%;height: 300px;"/>
		</view>
		<view class="name">
			{{item.name}}
			
		</view>
		<view class="intro">{{item.msg}}</view>
		<!-- <view class="dis">你距离这里有{{dis}}km</view> -->
		<button type="default" @tap="goto">到这里去</button>
	</view>
	
</template>

<script setup>
	import {
		ref,computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userstore.js';
	import {getMapDistance} from "@/utils/tools.js"
	let store = userStore()
	let item = ref({})
	let dis=ref()
	onLoad((data) => {
		getItemById(data.id)
	})

	async function getItemById(id) {
		let data = {
			"objectId": id
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/xianplayitem?where=" + ed)
		console.log(res)
		item.value = res.results[0]
		uni.setNavigationBarTitle({
			title:item.value.name
		})
		console.log(store.currentPos)
		console.log(item.value.lat,item.value.lon)
		dis.value=getMapDistance(store.currentPos.longitude,store.currentPos.latitude,
		item.value.lon,item.value.lat
		)
	}
	// function goto(){
	// 	uni.navigateTo({
	// 		url:`/pages/mywebView/mywebView?type=2&lat=${item.lat}&lon=${item.lon}`
	// 	})
		
	// }
	function goto(){
			uni.navigateTo({
				url:`/pages/mywebView/mywebView?type=2&lat=${item.value.lat}&lon=${item.value.lon}&name=${item.value.name}`
			})
			
		}
</script>

<style>
.name{
	font-size: 30px;
}
</style>